@keyframes fadeIn {
  from {
    opacity: 0;        
    transform: translate(-50%,-120%); 
  }
  to {
    opacity: 1;        
    transform: translate(-50%,-80%);    
  }
}

.bg{
  position:absolute;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background:rgba(0,0,0,0.8) ;

}

.container{
  position: absolute;
  top:60%;
  left:50%;
  transform: translate(-50%,-80%);
  width: 80%;
  height:60%;
  border-radius: 20px;
  background-color: #ffeb3b;
  // animation: fadeIn 0.7s ease-out forwards;
}

.FirstLineContainer{
  position:absolute;
  top:4%;
  left:50%;
  transform: translate(-50%);
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.MonthFont{
  font-size:14px;
  color:white;
}

.Lunar{
  font-size:12px;
  color:white;
}

.WeekFont{
  font-size:14px;
  color:white;
}

.ContentContainer{
  position:absolute;
  top:12%;
  left:50%;
  width: 100%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.DayFont{
  font-size:100px;
  color:white;
  margin:0 0 -17px;
}

.content{
  width: 90%;
  font-size:15px;
  color:white;
}

.content2{
  margin:0 0 22px;
  font-size:22px;
  color:white;
}

.shareContainer{
  position:absolute;
  top:73%;
  left:50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:10px;
}

.Share_btn{
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width:10vw;
  height: 10vw;
  background: transparent;
}

.ShareFont{
  font-size:14px;
  color:white;
  font-weight: bold;
}

.Share_img{
  width: 100%;
  height: 100%;
}

.GoodLuckContainer{
  position:absolute;
  top:73%;
  left:50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:10px;
}

.LogoImg{
  width: 10vw;
  height: 10vw;
}

.GoodLuckContainerFont{
  color:white;
  font-size:15px;
}

.Welcome_gif{
  position:absolute;
  top:50%;
  left:1%;
}

.ColorFont{
  position:absolute;
  bottom: 4%;
  left:50%;
  transform: translate(-50%);
  width: 100%;
  text-align: center;
  font-size:12px;
  color:white;
}

.CloseContainer{
  position: absolute;
  left:50%;
  top:76%;
  transform: translate(-50%);
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.close_btn{
  padding: 0;
  width: 10vw;
  height: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

.close_img{
  width: 100%;
  height: 100%;
}

.shareContainer2{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin:0 0 15px;
}

.SaveContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.SaveBtn{
  width: 13vw;
  height: 13vw;
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.SaveImg{
  width: 100%;
  height: 100%;
}

.WeChatContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.WechatBtn{
  width: 13vw;
  height: 13vw;
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7f7a78;
}

.WechatImg{
  width: 100%;
  height: 100%;
}

.FriendContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.FriendBtn{
  width: 13vw;
  height: 13vw;
  border-radius: 50%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.FriendImg{
  width: 100%;
  height: 100%;
}

.Font{
  text-align: center;
  font-size:13px;
  color:white;
}

